<!DOCTYPE html>
<html class="no-js" lang="zxx" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-model="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">
    <title>查看购物车</title>

    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>

    <!-- Google fonts include -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,900%7CYesteryear"
          rel="stylesheet">

    <!-- All Vendor & plugins CSS include -->
    <link href="css/vendor.css" rel="stylesheet">
    <!-- Main Style CSS -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="/oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="/oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<!-- Start Header Area -->
<header class="header-area">
    <!-- main header start -->
    <div class="main-header d-none d-lg-block">
        <!-- header top start -->
        <div class="header-top bdr-bottom">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="welcome-message">
                            <p>欢迎光临花语在线订花系统</p>
                        </div>
                    </div>
                    <div class="col-lg-6 text-right">
                        <div class="header-top-settings">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- header top end -->

        <!-- header middle area start -->
        <div class="header-main-area sticky">
            <div class="container">
                <div class="row align-items-center position-relative">

                    <!-- start logo area -->
                    <div class="col-lg-3">
                        <div class="logo">
                            <a href="index.html">
                                <h2>HUA YU</h2>
                            </a>
                        </div>
                    </div>
                    <!-- start logo area -->

                    <!-- main menu area start -->
                    <div class="col-lg-6 position-static">
                        <div class="main-menu-area">
                            <div class="main-menu">
                                <!-- main menu navbar start -->
                                <nav class="desktop-menu">
                                    <ul>
                                        <li><a href="index.html">主页</a></li>
                                        <li><a href="store.html">查看商家</a></li>
                                        <li><a href="shopping.html">查看购物车</a></li>
                                    </ul>
                                </nav>
                                <!-- main menu navbar end -->
                            </div>
                        </div>
                    </div>
                    <!-- main menu area end -->

                    <!-- mini cart area start -->
                    <div class="col-lg-3">
                        <div class="header-configure-wrapper">
                            <div class="header-configure-area">
                                <ul class="nav justify-content-end">
                                    <li class="user-hover">
                                        <a href="#" title="个人中心">
                                            <i class="lnr lnr-user"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <h4>退出</h4>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- mini cart area end -->

                </div>
            </div>
        </div>
        <!-- header middle area end -->
    </div>
    <!-- main header start -->
</header>
<!-- end Header Area -->


<!-- mobile header start -->
</header>
<!-- end Header Area -->


<!-- main wrapper start -->
<main>
    <!-- breadcrumb area start -->
    <div class="breadcrumb-area common-bg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h1>订单</h1>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end -->

    <!-- page main wrapper start -->
    <div class="container" id="container">
        <div>
            <h1>订单</h1>
        </div>
        <hr>
        <table class="table">
            <thead>
            <tr>
                <th>封面</th>
                <th>商品名称</th>
                <th>单价</th>
                <th>购买数量</th>
                <th>小计</th>
            </tr>
            </thead>
            <tbody >
            <tr v-for="obj in result.data">
                <td>{{obj.cover}}</td>
                <td>{{obj.fname}}</td>
                <td>{{obj.price}}</td>
                <td>{{obj.fnum}}</td>
                <td>{{obj.total}}</td>
            </tr>
            </tbody>
        </table>
        <div class="text-right">
            <h4>共计:{{result.count}}元</h4>
            <button class="btn btn-danger" v-on:click="addOrder">确认支付</button>
        </div>
    </div>
</main>
<!-- product details inner end -->

<script src="js/vendor.js"></script>
<!-- Active Js -->
<script src="js/active.js"></script>
<script src="js/vue.js"></script>
<script src="js/global.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/layer/layer.js"></script>
</body>
<script>
    var uri = location.href;
    var params = uri.split('?')[1];
    var oid = params.split('=')[1];
    var vue = new Vue({
        el: '#container',
        data: {
            result: {},
            sid:0
        },
        methods: {
            queryDitailed: function () {
                axios.get('ditailed/queryDitailed/'+oid).then(function (res) {
                    vue.result=res.data;
                    vue.sid=res.data.data[0].sid;
                })
            },
            addOrder:function () {
                axios.post('order/addOrder',{oid:oid,sid:this.sid,total:this.result.count}).then(function (res) {
                    if(res.data.code==200){
                        layer.msg(res.data.msg,{icon:1,time:1000},function () {
                            location.href=base_url+"index.html";
                        })
                    }else {
                        layer.msg(res.data.msg);
                    }
                })
            }
        },
        mounted: function () {
            this.queryDitailed();
        }
    });
</script>
</html>
